<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="utf-8" />
    <title>${fileconfig['system']['name']}-${userinfo['nickname']}-kcweb云管</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta name="HandheldFriendly" content="true" />
    <meta name="MobileOptimized" content="320" />
    <link rel="icon" href="${config.domain['kcwebimg']}/icon/yung.png" />
    <link rel="shortcut icon" href="${config.domain['kcwebimg']}/icon/yung.png" />
    <%include file="../include/static.html"/>
<style>
*{padding:0px;margin:0px}
.kcw-side-scroll::-webkit-scrollbar {width:4px;height:4px;}
.kcw-side-scroll::-webkit-scrollbar-track {border-radius: 0px;}
.kcw-side-scroll::-webkit-scrollbar-thumb {border-radius: 10px;background-image: linear-gradient(135deg, #1DE9B6 0%, rgba(8, 196, 219, 1) 72%, #057494 100%);transition: all .2s;}
.el-header, .el-footer {background-color: #B3C0D1;line-height: 60px;padding:0px;}
.el-menu-item, .el-submenu__title {
    height: 45px;
    line-height: 40px;
    position: relative;
    -webkit-box-sizing: border-box;
    white-space: nowrap;
    list-style: none;
}
.el-tabs__header {
    padding: 0;
    position: relative;
    margin: 0 0 0px;
}
</style>
</head>
<body>
<!-- <audio src="${config.domain['kcwebfile']}/audio/202007/6e33619378be803928ae1191a3664b86.wav" autoplay="autoplay"></audio> -->
<div id="app">
    <el-container>
    <el-aside :width="leftwidth+'px'">
        <el-col :style="'width:'+leftwidth+'px;height:'+(winheight)+'px;overflow:hidden;'">
            <div v-if="collapse" style="text-align:center;cursor:pointer;width:99%;height:78px;background:#545c64;color:#fff;overflow:hidden;">
                <i v-on:click="collapse=false,leftwidth=160" class="el-icon-d-arrow-right" style="font-size:20px;margin-top:30px;"></i>
            </div>
            <div v-else v-on:click="collapse=true,leftwidth=60" style="cursor:pointer;width:99.5%;height:78px;background:#545c64;color:#fff;overflow:hidden;">
                % if fileconfig:
                % if fileconfig['system']['logo']:
                <div style="float:left;margin-top:22px;width:40px;height:40px;line-height:40px;margin-left:22px;"><img src="${fileconfig['system']['logo']}" style="display: inline-block; vertical-align: middle;width:40px;height:40px;border-radius:5px;" alt=""></div>
                % endif
                <span style="float:left;padding-top:10px;margin-left:5px;width:80px;overflow:hidden;padding-top:22px;height:40px;overflow:hidden">${fileconfig['system']['name']}</span>
                % endif
            </div>
            <el-menu default-active="0" class="kcw-side-scroll" :collapse="collapse" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" style="height:calc(100% - 77px);width:100%;overflow:hidden;overflow-y:auto;">
                <el-menu-item @click=gethtml(item1.url,item1.title,item1.icon) v-for="item1,index1 in data.leftlist" v-if="item1.level=='' && item1.url" :index="index1">
                    <img v-if="item1.icon" v-bind:src="item1.icon" style="width:20px;height:18px;margin-top:-1px">
                    <span slot="title" v-html="item1.title"></span>
                </el-menu-item>
    
                <el-submenu v-else :index="index1">
                    <template slot="title">
                        <img v-if="item1.icon" v-bind:src="item1.icon" style="width:20px;height:18px;margin-top:-1px">
                        <span v-html="item1.title"></span>
                    </template>
                    <el-menu-item @click=gethtml(item2.url,item2.title,item2.icon) v-for="item2,index2 in item1.level" v-if="item2.level=='' && item2.url" :index="index1+'-'+index2">
                        <img v-if="item2.icon" v-bind:src="item2.icon" style="width:20px;height:18px;margin-top:-1px">
                        <span v-html="item2.title"></span>
                    </el-menu-item>
                    <el-submenu v-else :index="index1+'-'+index2">
                        <template slot="title">
                            <img v-if="item2.icon" v-bind:src="item2.icon" style="width:20px;height:18px;margin-top:-1px">
                            <span v-html="item2.title"></span>
                        </template>
                        <el-menu-item @click=gethtml(item3.url,item3.title,item3.icon) v-for="item3,index3 in item2.level" v-if="item3.level=='' && item3.url" :index="index1+'-'+index2+'-'+index3">
                            <img v-if="item3.icon" v-bind:src="item3.icon" style="width:20px;height:18px;margin-top:-1px">
                            <span v-html="item3.title"></span>
                        </el-menu-item>
                        <el-submenu v-else :index="index1+'-'+index2+'-'+index3">
                            <template slot="title">
                                <img v-if="item3.icon" v-bind:src="item3.icon" style="width:20px;height:18px;margin-top:-1px">
                                <span v-html="item3.title"></span>
                            </template>
                            <el-menu-item @click=gethtml(item4.url,item4.title,item4.icon) v-for="item4,index4 in item3.level" v-if="item4.level=='' && item4.url" :index="index1+'-'+index2+'-'+index3+'-'+index4">
                                <img v-if="item4.icon" v-bind:src="item4.icon" style="width:20px;height:18px;margin-top:-1px">
                                <span v-html="item4.title"></span>
                            </el-menu-item>

                            <el-submenu v-else :index="index1+'-'+index2+'-'+index3+'-'+index4">
                                <template slot="title">
                                    <img v-if="item4.icon" v-bind:src="item4.icon" style="width:20px;height:18px;margin-top:-1px">
                                    <span v-html="item4.title"></span>
                                </template>
                                <el-menu-item @click=gethtml(item5.url,item5.title,item5.icon) v-for="item5,index5 in item4.level" v-if="item5.level=='' && item5.url" :index="index1+'-'+index2+'-'+index3+'-'+index4+'-'+index4">
                                    <img v-if="item5.icon" v-bind:src="item5.icon" style="width:20px;height:18px;margin-top:-1px">
                                    <span v-html="item5.title"></span>
                                </el-menu-item>
                            </el-submenu>

                        </el-submenu>
                    </el-submenu>
                </el-submenu>
                <!-- <el-menu-item @click=gethtml('/intapp/index/menu','导航管理','${config.domain['kcwebimg']}/icon/menu.png') index="menu">
                    <img src="${config.domain['kcwebimg']}/icon/menu.png" style="width:20px;height:18px;margin-top:-1px">
                    <span slot="title">导航管理</span>
                </el-menu-item> -->
            </el-menu>
        </el-col>
    </el-aside>
    <el-container>
        <!-- <el-header style="height:30px;padding:0px;margin:0px;overflow:hidden;">
                <el-menu :default-active="activeIndex2" mode="horizontal" background-color="#3597FF" text-color="#FFF" active-text-color="#FFF" style="width:100%;height:50px;overflow:hidden;border:0px;margin-top:-16px;">
                    <el-menu-item @click="header={title:item1.title,status:true,url:item1.url}" v-for="item1,index1 in data.header" v-if="item1.level==''" :index="index1">
                        <img v-if="item1.icon" v-bind:src="item1.icon" style="width:20px;height:18px;margin-top:-1px">
                        <span slot="title" v-html="item1.title"></span>
                    </el-menu-item>
                    <el-submenu v-else :index="index1">
                        <template slot="title">
                            <img v-if="item1.icon" v-bind:src="item1.icon" style="width:20px;height:18px;margin-top:-2px">
                            <span v-html="item1.title"></span>
                        </template>
                        <el-menu-item @click="header={title:item2.title,status:true,url:item2.url}" v-for="item2,index2 in item1.level" v-if="item2.level==''" :index="index1+'-'+index2">
                            <img v-if="item2.icon" v-bind:src="item2.icon" style="width:20px;height:18px;margin-top:-2px">
                            <span v-html="item2.title"></span>
                        </el-menu-item>
                    </el-submenu>
                    <el-submenu :index="-1" style="float:right;">
                        <template slot="title">
                            % if userinfo['icon']:
                            <img src="${userinfo['icon']}" style="width:20px;height:18px;margin-top:-2px">
                            % endif
                            <span>${userinfo['nickname']}</span>
                        </template>
                        <el-menu-item index="-1-1">
                            <span>${userinfo['name']}</span>
                        </el-menu-item>
                        <el-menu-item index="-1-2" @click="setmypwd">
                            <span>设置登录密码</span>
                        </el-menu-item>
                        <el-menu-item index="-1-3" @click="dialogTableVisible=true">
                            <span>重启</span>
                        </el-menu-item>
                        <el-menu-item index="-1-3" @click="outlogin">
                            <span>退出系统</span>
                        </el-menu-item>
                    </el-submenu>
                </el-menu>
        </el-header> -->
        <el-main style="padding:0px;margin:0px;" class="background">
            <!-- <div style="padding-top:0px;height:20px;;border-bottom:1px solid #CCC;width:100%;overflow:hidden;color:#FFF;background: linear-gradient(to bottom, #3597FF 0%,#D1E5FA 100%);">
                <div style="float:left;width:60%;overflow:hidden;font-size:14px;">
                    <span style="float:left;width:40px;">
                        <img v-if="url=='/' && icon" v-bind:src="icon" style="float:left;height:18px;cursor:pointer;margin-left:10px;margin-top:2px;">&nbsp&nbsp
                        <img v-else-if="icon" v-on:click=gethtml(url,title,icon) v-bind:src="icon" style="float:left;margin-top:2px;height:18px;cursor:pointer;margin-left:10px;">&nbsp&nbsp
                    </span>
                    <span v-html="title" style='font-size:14px;float:left;padding-top:1px;margin-left:1px;'></span>
                </div>    
                <div style="float:left;width:40%;overflow:hidden;text-align:left">
                    <span v-html="url" @click=copy(url) style="float:right;font-size:10px;padding-top:1px;border-left:1px solid #FFF;padding-left:10px;margin-left:10px;min-width:160px"></span>
                    <span style='font-size:14px;float:right;padding-top:1px;margin-left:6px;padding-left:2px;text-align:left;min-width:50px;margin-left:10px;cursor:pointer ' @click=copys(url)>复制链接</span>
                    
                </div>
                <div v-if="jdt" style="float:left;width:100%;margin-top:-10px">
                    <el-progress :percentage="jdt" :stroke-width="4" :text-inside="true" status="exception"></el-progress>
                </div>
            </div> -->
            <div v-bind:style="'padding:0px;width:100%;height:'+(winheight-0)+'px;overflow:hidden'">
                <el-tabs v-if="!is_url(url) && !isIE()" v-model="eltabs.editableTabsValue2" type="card"  closable @tab-remove="removeTab">
                    <el-tab-pane v-for="(item, index) in eltabs.editableTabs2" :key="item.name" :label="item.title" :name="item.name">
                        <span slot="label"><img v-if="item.icon" :src="item.icon" alt="" style="height:18px;float:left;margin-top:10px">{{item.title}}</span>
                        <transition name="el-fade-in-linear"><div v-show="show"><iframe v-bind:srcdoc="item.content" id="iframe" style="margin:0px;padding:0px;border:0px" frameborder="0" frameborder="0" marginheight="0" marginwidth="0"  width="100%" v-bind:height="(winheight-35)+'px'"></iframe></div></transition>
                    </el-tab-pane>
                </el-tabs>
                <el-tabs  v-else v-model="eltabs.editableTabsValue2" type="card"  closable @tab-remove="removeTab">
                    <el-tab-pane v-for="(item, index) in eltabs.editableTabs2" :key="item.name" :label="item.title" :name="item.name">
                        <span slot="label"><img v-if="item.icon" :src="item.icon" alt="" style="height:18px;float:left;margin-top:10px">{{item.title}}</span>
                        <transition name="el-fade-in-linear"><div v-show="show"><iframe id="iframe" :src="item.name" style="margin:0px;padding:0px;border:0px" frameborder="0" frameborder="0" marginheight="0" marginwidth="0"  width="100%" v-bind:height="(winheight-35)+'px'"></iframe></div></transition>
                    </el-tab-pane>
                </el-tabs>
            </div>
            <div style="position:fixed;right:0px;bottom:0px;max-width:160px;max-height:60px;background:#FFF">
                <el-dropdown>
                    <el-button type="primary" class="el-dropdown-link">
                            % if userinfo['icon']:
                            <img src="${userinfo['icon']}" style="width:20px;height:18px;margin-top:-2px">
                            % endif
                            ${userinfo['nickname']}<i class="el-icon-arrow-up el-icon--right"></i>
                    </el-button>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>${userinfo['name']}</el-dropdown-item>
                        <el-dropdown-item @click.native="setmypwd">设置登录密码</el-dropdown-item>
                        <el-dropdown-item @click.native="dialogTableVisible=true">重启</el-dropdown-item>
                        <el-dropdown-item @click.native="outlogin">退出系统</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </el-main>
    </el-container>
    </el-container>
    <el-dialog title="重启" :visible.sync="dialogTableVisible" width="300px" top="20%">
        <div style="padding:22px 22px">
            <div style="height:40px">
                <span v-if="netstatus==1"><i class="fa fa-play" style="color:#67C23A;"></i>运行中</span>
                <span v-else-if="netstatus==2"><i class="el-icon-loading"></i>应用重启中</span>
                <span v-else-if="netstatus==3"><i class="el-icon-loading"></i>服务器重启中</span>
                <span v-else-if="netstatus==4"><i class="el-icon-loading"></i>等待服务器启动</span>
            </div>
            <el-button type="primary" @click="reboot">重启服务器</el-button>
            <el-button type="success" @click="rekcwebplus">重启当前应用</el-button>
        </div>
    </el-dialog>
    <el-dialog :title="header.title" :visible.sync="header.status" width="90%" style="overflow: hidden;padding:0px" top="40px">
        <iframe :src="header.url" frameborder="0"  width="100%" v-bind:height="(winheight-140)+'px'"></iframe>
    </el-dialog>
</div>
</body>
<script>
function setleftwidth(boot){
    setleftwidths(boot)
}
    var VU=new Vue({
        el: '#app',
        data:{
            netstatus:1,  //1正常  2应用重启中 3服务器重启中 4等待服务器启动
            show:false,jdt:0,dialogTableVisible:false,
            winheight:document.documentElement.clientHeight,winwidth:document.documentElement.clientWidth,
            activeIndex2: '',
            iframedoc:"kcwebplus",title:'首页',icon:'/images/icon/home.gif',url:'/',httpurl:'',
            leftwidth:160,collapse:false,
            data:{},header:{title:"",status:false,url:''},
            tablerlist:[],
            eltabs:{
                editableTabsValue2: '',
                editableTabs2: [
                    // {title: '首页', name: '/',content: 'kcwebplus',icon:''},
                ],
                tabIndex:0
            },
        },
        mounted:function(){
            self=this
            window.onresize = function(){
                self.winheight=document.documentElement.clientHeight
                self.winwidth=document.documentElement.clientWidth
            }
            window.setleftwidths = this.setleftwidths;
            self.inits()
        },
        methods: {
            setleftwidths:function(boot){
                var self=this;
                if(boot){
                    self.leftwidth=60
                    self.collapse=true
                }else{
                    self.leftwidth=160
                    self.collapse=false
                }
            },
            gethtml:function(url,title,icon){
                self=this
                for(var i=0;i<self.eltabs.editableTabs2.length;i++){
                    if(self.eltabs.editableTabs2[i].name==url){
                        self.eltabs.editableTabsValue2=url
                        self.title=title;self.icon=icon;self.url=url;
                        return
                    }
                }
                self.jdt=0;
                if(icon.indexOf('phpmyadmin')!=-1){
                    window.open(url);
                }else if(navigator.userAgent.indexOf("Edge") > -1 || self.is_url(url)){
                    iframeself=this;
                    if (!self.is_url(url)){
                        url=window.location.protocol+"//"+window.location.host+url
                    }
                    if(iframeself.url!=url){
                        iframeself.icon='/images/icon/timg.gif';iframeself.title="加载中";iframeself.url=url;
                    }
                    var iframe = document.getElementById("iframe");
                    if (iframe.attachEvent) {
                        iframe.attachEvent("onload", function() {
                            iframeself.title='';iframeself.icon=icon;
                        });
                    } else {
                        iframe.onload = function() {
                            iframeself.title='';iframeself.icon=icon;
                        };
                    }
                    self.addTab(title,url,'',icon)
                }else{
                    if (self.url==url){
                        self.iframedoc=''
                    }
                    self.show=false
                    self.setjdt()
                    setTimeout(function(){
                        self.icon='/images/icon/timg.gif';self.title="加载中";self.url=url;
                        self.getcontent(url).then(function(html){
                            self.jdt=100;self.show=true;
                            self.title=title;self.icon=icon;
                            setTimeout(function(){self.jdt=0;},300)
                            self.iframedoc=html
                            self.addTab(title,url,html,icon)
                        }).catch(function(err){
                            self.jdt=100;self.show=true;
                            self.title=title;self.icon=icon;
                            setTimeout(function(){self.jdt=0;},300)
                            if (err.response){
                                self.iframedoc=err.response.data
                                self.addTab(title,url,err.response.data,icon)
                            }else{
                                self.iframedoc="网络异常"
                                self.addTab(title,url,"网络异常",icon)
                            }
                        });
                    },10)
                }
            },
            addTab:function(title,name,content,icon) {
                let newTabName = ++this.eltabs.tabIndex + '';
                this.eltabs.editableTabs2.push({
                    title:title,
                    name: name,
                    content:content,
                    icon:icon
                });
                this.eltabs.editableTabsValue2 = name;
            },
            removeTab:function(targetName) {
                if(this.eltabs.editableTabs2.length>1){
                    let tabs = this.eltabs.editableTabs2;
                    let activeName = this.eltabs.editableTabsValue2;
                    if (activeName === targetName) {
                        tabs.forEach(function(tab, index){
                            if (tab.name === targetName) {
                            let nextTab = tabs[index + 1] || tabs[index - 1];
                            if (nextTab) {
                                activeName = nextTab.name;
                            }
                            }
                        });
                    }
                    this.eltabs.editableTabsValue2 = activeName;
                    this.eltabs.editableTabs2 = tabs.filter(function(tab){return tab.name !== targetName});
                }
            },
            checkserver:function(types){
                self=this
                self.post("/intapp/index/pub/checkserver").then(function(res){
                    self.netstatus=1
                }).catch(function(){
                    if(types=='rekcwebplus'){
                        self.netstatus=2
                    }else{
                        self.netstatus=4
                    }
                    setTimeout(function(){
                        self.checkserver(types)
                    },1000)
                });
            },
            reboot:function(){
                self=this
                self.$confirm('此操作将重新启动您的服务器, 是否继续?', '提醒', {
                confirmButtonText: '确定重启服务器',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(function(){
                    self.netstatus=3
                    self.post("/intapp/index/index/reboot/reboot",{shell:'reboot'}).then(function(res){
                        // self.netstatus=1
                        setTimeout(function(){
                            self.reboot()
                        },200)
                    }).catch(function(){
                        self.netstatus=3
                        setTimeout(function(){
                            self.checkserver('reboot')
                        },60000)
                    });
                }).catch(function(){});
            },
            rekcwebplus:function(){
                self=this
                self.$confirm('此操作将重新启动当前应用, 是否继续?', '提醒', {
                confirmButtonText: '确定重启',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(function(){
                    self.netstatus=2
                    self.post("/intapp/index/index/reboot/app",{shell:'bash server.sh'}).then(function(res){
                        // self.netstatus=1
                        setTimeout(function(){
                            self.rekcwebplus()
                        },200)
                    }).catch(function(){
                        self.netstatus=2
                        setTimeout(function(){
                            self.checkserver('rekcwebplus')
                        },3000)
                    });
                }).catch(function(){});
            },
            setmypwd:function(){
                self=this
                self.$prompt('请输新密码', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                inputValidator:function(value){
                    if(value.length>=6&&value.length<=10){
                        return true
                    }else{
                        return "请输入6到10位字符"
                    }
                }
                }).then(function(value){
                    self.post('/intapp/index/admin/setmypwd',{password:md5('kcw'+value.value)}).then(function(res){
                        self.$message({type: 'success',message: '您的设置的密码是: ' + value.value});
                    })
                }).catch(function(){});
            },
            isIE:function() {
                if(!!window.ActiveXObject || "ActiveXObject" in window){
                    return true;
                }else{
                    return false;
            　　 }
            },
            setjdt:function(){
                self=this
                if(self.jdt<80){
                    setTimeout(function(){
                        self.jdt+=20;
                        self.setjdt();
                    },100)
                }
                else if(self.jdt<90){
                    setTimeout(function(){
                        self.jdt+=0.2;
                        self.setjdt();
                    },100)
                }else if(self.jdt<94){
                    setTimeout(function(){
                        self.jdt+=0.2;
                        self.setjdt();
                    },500)
                }else if(self.jdt<97){
                    setTimeout(function(){
                        self.jdt+=0.1;
                        self.setjdt();
                    },500)
                }
            },
            inits:function(){
                self=this
                self.get('/intapp/index/index/menu',false,false).then(function(res){
                    self.data=res.data
                    if(res.data['leftlist'].length){
                        self.gethtml(res.data['leftlist'][0]['url'],res.data['leftlist'][0]['title'],res.data['leftlist'][0]['icon'])
                    }
                })
            },
            outlogin:function(){
                self=this
                self.get('/intapp/index/pub/outlogin',false,false).then(function(res){
                    if(res.code==0){
                        location.reload()
                    }
                })
            },
            copys:function(str){
                if(str.indexOf("http") != -1){
                    this.copy(str)
                }else{
                    this.copy(window.location.protocol+"//"+window.location.host+str)
                }
            },
            
        }
    })
</script>
</html>